<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="js/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="js/bower_components/bootstrap-select/dist/css/bootstrap-select.min.css">
  <link rel="stylesheet" href="js/bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css">
  <link rel="stylesheet" href="js/bower_components/bootstrap-table/dist/bootstrap-table.min.css">
  <link rel="stylesheet" href="js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.css">
  <link href="js/bower_components/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

  <script src="js/bower_components/jquery/dist/jquery.min.js"></script>
  <script src="js/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="js/bower_components/bootbox.min.js"></script>
  <script src="js/bower_components/bootstrap-select/js/bootstrap-select.js"></script>
  <script src="js/bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
  <script src="js/bower_components/bootstrap-table/dist/bootstrap-table.min.js"></script>
  <script src="js/bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

  <script src="js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
  <script src="js/bower_components/jquery-form-validator/form-validator/jquery.form-validator.min.js"></script>
  <script src="js/bower_components/moment/min/moment-with-locales.min.js"></script>
  <script src="js/bower_components/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
  <script>
    function setTable(myUserList) {
      $("#tbMyLog").bootstrapTable('destroy')
      $("#tbMyLog").bootstrapTable({
        data: myUserList,
        striped: true,
        contentType: "application/x-www-form-urlencoded;charset=utf-8",
        uniqueId: "value",
        idField: "id",
        checkboxHeader: true,
        singleSelect: true,
        clickToSelect: true,
        columns: [{
          field: "id",
          align: "center",
          // visible: false
        },{
          field: "ip",
          title: "用户IP",
          align: "center"
        },{
          field: "loginTi",
          title: "登陆时间",
          align: "center"
        },{
          field: "method",
          title: "方法",
          align: "center"
        },{
          field: "isStart",
          title: "是否启用",
          checkbox: true,
          align: "center"
        }]
      })
    }

    function getDate() {
      MyLog = {
        "beginPage": 0,
        "pageCount": 4
      };
      $.ajax({
        type: "put",
        url: "http://localhost:8082/myLog/getAll",
        contentType: "application/json;charset=utf-8",
        data: JSON.stringify(MyLog),
        dataType: "json",
        success: function(res) {
          console.log("获得分页后的数据，返回结果是：");
          console.log(res);
          setTable(res)
        }
      })
    }

    function getSelectID(){
      var id = $("#tbMyLog").bootstrapTable('getSelections');
      console.log("getSelectID");
      if(id.length > 0){
        return id[0].id;
      }else{
        bootbox.alert("必须选择一条要修改的信息！")
      }
    }

    $(function() {
      getDate()
      $("#btnAdd").click(function(){
        $("#myMobdelLable").text("新增用户信息");
        $("#divMyUserFrom").modal();
      })

      $("#btnDel").click(function(){
        console.log("进入删除方法");
        var id = getSelectID();
        console.log(id);
        $.ajax({
          type: "get",
          url: "http://localhost:8082/myLog/deleteMyLog?id=" + id,
          contentType: "application/json;chartset=utf-8",
          dataType: "json",
          success: function(res){
            console.log("根据主键删除数据并返回的结果为：");
            console.log(res);
            if(res == 1){
              alert("删除成功");
              getDate();
            }
          }
        })
      })

      $("#btnSave").click(function(){
        var id = $("#id").val();
        console.log(id);
        if(id){
          MyLog = {
            "ip": $("#id").val(),
            "loginTi": $("loginTi").val(),
            "id": id
          };
          $.ajax({
            type: "put",
            url: "http://localhost:8082/myLog/updateMyLog",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(MyLog),
            dataType: "json",
            success: function(res){
              console.log("修改数据返回的结果：");
              console.log(res);
              if(res > 0){
                alert("保存成功");
                $("divMyLogFrom").modal('hiden');
                getDate();
              }
            }
          });
        }else{
          // 添加新信息
          MyUser = {
            "ip": $("#ip").val(),
            "loginTi": $("#loginTi").val()
          };
          $.ajax({
            type: "put",
            url: "http://localhost:8082/myLog/addLog",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(MyLog),
            dataType: "json",
            success: function(res){
              console.log("添加数据后返回的结果:");
              console.log(res);
              if(res > 0){
                alert("保存成功");
                $("#divMyLogFrom").modal('hide');
                getDate()
              }
            }
          })
        }
      })

      $("#btnUpdate").click(function(){
        var id = getSelectID();
        console.log(id);
        $.ajax({
          type: "get",
          url: "http://localhost:8082/myLog/getLog?id=" + id,
          contentType: "application/json;chartset=utf-8",
          dataType: "json",
          success: function(res){
            console.log("根据主键获取后端返回的结果为：");
            console.log(res);
            if(res != null){
              console.log(res["ip"]);
              $("#myMobdelLable").text("修改用户信息");
              $("#ip").val(res["ip"]);
              $("#loginTi").val(res["loginTi"]);
              $("#id").val(res["id"]);
              $("#divMyLogFrom").modal();
            }
          }
        })
      })

      $("#btnSelect").click(function() {
        var loginTi = $("#txtLoginTi").val();
        console.log(loginTi);
        if(loginTi.length == 0){
          getDate()
        }else{
          MyLog = {
            "beginPage": 0,
            "pageCount": 4,
            "loginTi": loginTi
          };
          $.ajax({
            type: "put",
            url: "http://localhost:8082/myLog/getAll",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(MyLog),
            dataType: "json",
            success: function(res) {
              console.log("获得分页后的数据，返回结果是：");
              console.log(res);
              setTable(res)
            }
          });
        }
      })
    })
  </script>
</head>
<body>
  <!-- 查询区 -->
  <div class="input-group">
    用户名称:<input type="text" id="txtLoginTi" />
    <button type="button" id="btnSelect" class="btn btn-default">搜索</button>
  </div>
  <div style="margin: 5px; margin-top: 10px;">
    <button type="button" id="btnAdd" class="btn btn-success">新增</button>
    <button type="button" id="btnUpdate" class="btn btn-info">修改</button>
    <button type="button" id="btnDel" class="btn btn-danger">删除</button>
  </div>
  <!-- 列表区域 -->
  <div class="row col-md-10" style="margin-top: 10px;">
    <table id="tbMyLog"></table>
  </div>

  <!-- 模态框 -->
  <div class="modal fade" id="divMyLogFrom" tabindex="-1" role="dialog" aria-labelledby="MyModel" aria-hidden="true" style="width: 100%;">
    <div class="modal=dialong" style="margin: auto;width: 400px;">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myMobdelLable">用户信息</h4>
          <input type="hidden" id="id" />
        </div>
        <div class="modal-body form-inline">
          <div class="form-group">
            <label class="control-label" for="ip">用户IP</label>
            <input style="width: 220px;" class="from-control" type="text" id="ip" />
          </div>
          <br />
          <div class="from-group">
            <label class="control-label" for="loginTi">登录时间</label>
            <input style="width: 220px" class="from-control" type="text" id="loginTi">
          </div>
          <br />
          <br />
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" id="btnSave">保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>